<template>
  <view class="choose-community">
    <view class="current-location">
      <view class="title">当前地点</view>
      <view class="content">
        <text>{{ currentLocation }}</text>
        <view @click="chooseLocation">
          <image src="../../static/icon/locate.png" />
          <text>重新定位</text>
        </view>
      </view>
    </view>

    <view class="community">
      <view class="title">附近社区</view>
      <u-cell-group><u-cell @click="nextPage" v-for="item in communityList" :key="item.id" :name="item.title" :title="item.title" isLink></u-cell></u-cell-group>
    </view>
    <map :markers="markers" @markertap="OnMarker" id="map" :longitude="location.longitude" :latitude="location.latitude"></map>
  </view>
</template>

<script>
import qqmapwx from '../../utils/initQQMapWx.js';
export default {
  data() {
    return {
      location: {
        longitude: 0,
        latitude: 0
      },
      markers: [
        {
          id: 1,
          longitude: 0,
          latitude: 0,
          width: 20,
          height: 20
        }
      ],
      currentLocation: '定位中',
      communityList: []
    };
  },
  methods: {
    // 初始化定位
    initLocation() {
      //用到定位
      uni.getLocation({
        type: 'gcj02',
        isHighAccuracy: 'true',
        success: res => {
          // console.log(res);
          this.updateLocation(res);
          // 用于坐标解析
          // 地址逆解析，将经纬度信息换为具体地址
          this.initLocationText();
          this.searchCommmunity();
        },
        fail(err) {
          console.log(err);
        }
      });
    },
    nextPage(e) {
      this.$store.commit('room/getHouseInformation', e.name);
      uni.navigateTo({
        url: '/pkg-house/choose-building/choose-building'
      });
    },
    // 将坐标解析文本
    initLocationText() {
      qqmapwx.reverseGeocoder({
        location: this.location,
        success: (res, data) => {
          // console.log(res.result.address);
          this.currentLocation = res.result.address;
        }
      });
    },
    // 重新选择位置
    chooseLocation() {
      uni.chooseLocation({
        ...this.location,
        success: res => {
          console.log(res);
          if (!res.name) return;
          this.currentLocation = res.name;
          this.updateLocation(res);
          this.searchCommmunity();
        }
      });
    },
    // 更新地图位置
    updateLocation(res) {
      this.location.longitude = res.longitude;
      this.location.latitude = res.latitude;
      this.markers[0].longitude = res.longitude;
      this.markers[0].latitude = res.latitude;
    },
    searchCommmunity() {
      qqmapwx.search({
        location: this.location,
        keyword: '小区住宅',
        page_size: 20,
        success: res => {
          this.communityList = res.data;
          res.data.forEach(item => {
            item.id = item.id - 0;
            this.markers.push({
              id: item.id - 0,
              longitude: item.location.lng,
              latitude: item.location.lat,
              width: 20,
              height: 20,
              title: item.title,
              iconPath: '/static/icon/house.png'
            });
          });
        }
      });
    },
    OnMarker(e) {
      // console.log(e.markerId);
      const house = this.markers.find(item => {
        return item.id === e.name;
      });
      console.log(house);
    }
  },
  onLoad() {
    // 初始化定位，定位中的逻辑中需要用到实例
    this.initLocation();
  }
};
</script>

<style lang="scss">
.choose-community {
  height: 100%;
  background-color: #fafafa;

  .current-location {
    .title {
      padding: 0 30rpx;
      line-height: 86rpx;
      color: #979797;
      font-family: PingFang SC;
      font-weight: regular;
      font-size: 12px;
      // line-height: 1.5;
      letter-spacing: 0px;
    }

    .content {
      width: 750rpx;
      height: 102rpx;
      background-color: #fff;
      box-sizing: border-box;
      padding: 0 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      text {
        font-size: 28rpx;
        color: #333;
      }

      view {
        display: flex;
        align-items: center;

        image {
          width: 30rpx;
          height: 30rpx;
          margin-right: 6rpx;
        }
        text {
          color: #5591af;
        }
      }
    }
  }
  .community {
    .title {
      padding: 0 30rpx;
      line-height: 86rpx;
      color: #979797;
      font-family: PingFang SC;
      font-weight: regular;
      font-size: 12px;
      // line-height: 1.5;
      letter-spacing: 0px;
    }
    ::v-deep .u-cell__body {
      background-color: #fff;
    }
  }
  #map {
    width: 750rpx;
    height: 750rpx;
  }
}
</style>
